<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="会员奖励详情" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="detailsBox">
			<text class="userName">Migou</text>
			<text class="orderNumber">订单编号: 1851479934774632453</text>
			<text class="orderAmount">订单金额: ￥9.60</text>
			<text class="integrate">积分: 1.9200</text>
			<view class="otherBox">
				<text class="info">累计收入抵用券: 2.1689</text>
				<view class="operate" @click="spread = !spread">
					<text>{{spread ? '汇总收齐' : '明细展开'}}</text>
					<image :style="{transform:`rotate(${spread ? 180 : 0}deg)`}" src="../../../static/icons/voucher-triangle.png"></image>
				</view>
			</view>
		</view>
		<view class="contentBox">
			
			<view class="noData" v-if="false">
				<image src="../../../static/images/order-noData.png"></image>
				<text>暂无数据~</text>
			</view>
			
			<view class="tableData">
				<view
					class="itemBox"
					:class="{interval:spread}"
				>
					<view class="infoBox">
						<text class="date">2025-01-11</text>
						<text class="voucher">0.4203</text>
					</view>
					<view class="particularsBox" v-show="spread">
						<text class="time">2025-01-11 11:11:58</text>
						<text class="voucher">0.4203</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				spread:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailsBox{
		width: calc(100% - 60rpx);
		float: left;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #f5f5f5;
		.userName,.orderNumber,.orderAmount,.integrate{
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 27rpx;
			float: left;
			color: rgb(62, 62, 62);
		}
		.otherBox{
			height: 70rpx;
			width: 100%;
			float: left;
			border-top: 1rpx solid #f5f5f5;
			margin-top: 20rpx;
			.info{
				width: auto;
				float: left;
				height: 100%;
				line-height: 90rpx;
				font-size: 26rpx;
				color: #ec7b2f;
			}
			.operate{
				width: auto;
				float: right;
				height: 100%;
				text{
					width: auto;
					float: left;
					height: 100%;
					line-height: 90rpx;
					font-size: 26rpx;
					color: #ec7b2f;
				}
				image{
					width: 30rpx;
					height: 30rpx;
					float: right;
					margin-top: 30rpx;
				}
			}
		}
	}
	.contentBox{
		width: 100%;
		position: absolute;
		top: 520rpx;
		bottom: 0rpx;
		overflow-y: auto;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 350rpx;
				height: 350rpx;
				margin-top: 200rpx;
				position: relative;
				left: 50%;
				margin-left: -175rpx;
			}
			text{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				float: left;
				font-size: 30rpx;
				font-weight: bold;
				color: #333132;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			.itemBox{
				width: 100%;
				height: auto;
				float: left;
				background-color: #fff;
				border-bottom: 1rpx solid #f5f5f5;
				.infoBox{
					width: 100%;
					height: 85rpx;
					float: left;
					display: flex;
					align-items: center;
					.date{
						width: auto;
						font-size: 32rpx;
						float: left;
						margin-left: 30rpx;
						color: rgb(55, 55, 55);
						font-weight: 450;
					}
					.voucher{
						flex: 1;
						float: right;
						margin-right: 30rpx;
						text-align: right;
						font-size: 32rpx;
						color: rgb(55, 55, 55);
						font-weight: 450;
					}
				}
				.particularsBox{
					width: 100%;
					height: 55rpx;
					float: left;
					background-color:#e9e9e9;
					.time{
						width: auto;
						float: left;
						margin-left: 30rpx;
						height: 100%;
						display: flex;
						align-items: center;
						font-size: 27rpx;
						color: rgb(72, 72, 72);
					}
					.voucher{
						width: auto;
						float: right;
						margin-right: 30rpx;
						height: 100%;
						display: flex;
						align-items: center;
						font-size: 27rpx;
						color: rgb(72, 72, 72);
					}
				}
			}
			.interval{
				margin-bottom: 20rpx;
			}
		}
	}
</style>